<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<style>
    .loading-indicator {
        width: 50px;
        height: 50px;
        border: 5px solid #f3f3f3;
        border-top: 5px solid #3498db;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    .noscript-warning {
        color: red;
        font-size: 16px;
        background-color: #ffeeee;
        padding: 10px;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>

  <div id="app">
    <div class="loading-indicator">
      <svg viewBox="0 0 50 50" width="50" height="50">
       <!-- <circle cx="25" cy="25" r="20" fill="none" stroke="blue" stroke - width="4">-->
        <circle 
          cx="25" 
          cy="25" 
          r="20" 
          fill="none" 
          stroke="#3498db" 
          stroke-width="5"
          stroke-linecap="round"
          stroke-dasharray="31.415, 31.415"
          transform="rotate(-90 25 25)">
          <animateTransform
            attributeName="transform"
            type="rotate"
            from="0 25 25"
            to="360 25 25"
            dur="1s"
            repeatCount="indefinite"/>
        </circle>
      </svg>
    </div>
  </div>

  <script>
    window.addEventListener('load', function() {
      document.querySelector('.loading-indicator').remove();
    });
  </script>
<!-- built files will be auto injected -->
</body>
</html>
